<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/swiper.css">
</head>

<body>



    <header>
        <div class="back">&lt;</div>
        <div class="center">我要采购</div>
        <div class="menu">···</div>
    </header>
    <div class="nav">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/大宗交易员.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/大宗交易员.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/大宗交易员.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/大宗交易员.png" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="search">
            <div class="city">北京</div>
            <div class="input">
                <input type="text" placeholder="搜索商品名称/供应商名称">
            </div>
        </div>
    </div>
    <div class="menus">
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
    </div>

    <div class="box-Two">
        <div class="title_h">
            <div class="Concern">我的关注</div>
            <div class="more">更多&gt;</div>
        </div>
        <div class="Concern_meus">
            <dl>
                <dt><img src="./images/蔬菜产地 copy.png" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/蔬菜产地 copy.png" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/蔬菜产地 copy.png" alt=""></dt>
                <dd>
                    <p>山东苹果红富士200吨起批</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
        </div>
    </div>

    <div class="box-Two">
        <div class="title_h">
            <div class="Concern">全国产地</div>
        </div>
        <div class="banner_menus">
            <div class="left">
                <dl>
                    <dd>
                        <h3>汇聚<span>4778</span>家</h3>
                        <p>全国优质农产品产地</p>
                    </dd>
                    <dt><img src="./images/中国产地 copy.png" alt=""></dt>
                </dl>
            </div>
            <div class="right">
                <div class="top">
                    <img src="./images/海南产地 copy.png" alt="">
                    <p>海南产地</p>
                </div>
                <div class="bottom">
                    <div class="bottom_left">
                        <p>水果产地</p>
                        <img src="./images/水果产地 copy.png" alt="">
                    </div>
                    <div class="bottom_right">
                        <div class="bottom_left">
                            <p>水果产地</p>
                            <img src="./images/水果产地 copy.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="box-Two">
        <div class="title_h">
            <div class="Concern">全国农业代办</div>
        </div>
        <div class="Concern_meus One">
            <dl>
                <dt><img src="./images/发求购 copy 3.png" alt=""></dt>
                <dd>
                    <p>张三三</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/发求购 copy 3.png" alt=""></dt>
                <dd>
                    <p>张三三</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
            <dl>
                <dt><img src="./images/发求购 copy 3.png" alt=""></dt>
                <dd>
                    <p>张三三</p>
                    <p><span>￥0.88</span>起/斤</p>
                </dd>
            </dl>
        </div>

    </div>
    <div class="box-Two">
        <div class="imgs">
            <figure>
                <img src="./images/大宗交易员.png">
            </figure>
            <figure>
                <img src="./images/代办入驻 .png">
            </figure>
        </div>

    </div>
    <div class="box-Two">
        <div class="title_h">
            <div class="Concern">热销推荐</div>
        </div>
        <ul class="list">
            <li>
                <figure>
                    <img src="images/二维码.png">
                </figure>
                <div class="content">
                    <h4>超级甜的发上海大叔大婶大叔大婶大大打扫打扫打扫</h4>
                    <p class="flex">
                        <span>石家庄新华社大三大四的</span>
                        <span>临汾</span>
                    </p>
                    <p>总价:4000</p>
                    <p>总价:4000</p>
                    <h3><span>￥0.88</span>起斤</h3>
                </div>
            </li>
            <li>
                <figure>
                    <img src="images/二维码.png">
                </figure>
                <div class="content">
                    <h4>超级甜的发上海大叔大婶大叔大婶大大打扫打扫打扫</h4>
                    <p class="flex">
                        <span>石家庄新华社大三大四的</span>
                        <span>临汾</span>
                    </p>
                    <p>总价:4000</p>
                    <p>总价:4000</p>
                    <h3><span>￥0.88</span>起斤</h3>
                </div>
            </li>
            <li>
                <figure>
                    <img src="images/二维码.png">
                </figure>
                <div class="content">
                    <h4>超级甜的发上海大叔大婶大叔大婶大大打扫打扫打扫</h4>
                    <p class="flex">
                        <span>石家庄新华社大三大四的</span>
                        <span>临汾</span>
                    </p>
                    <p>总价:4000</p>
                    <p>总价:4000</p>
                    <h3><span>￥0.88</span>起斤</h3>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer menus">
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
        <dl>
            <dt><img src="./images/本地.png" alt=""></dt>
            <dd>水果</dd>
        </dl>
    </div>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/swiper.jquery.min.js"></script>
    <script>
        //Swiper构造函数，swiper1变量是这个构造函数的实例对象
        var swiper1 = new Swiper('.swiper-container', {
            autoplay: 2000,//可选选项，自动滑动
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            //               nextButton: '.swiper-button-next',
            //                prevButton: '.swiper-button-prev',
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            // scrollbarHide: false,
            // autoplayDisableOnInteraction : false,
            //                loop: true, //若是启用了无限循环，不能用scrollbar
        })
    </script>
</body>

</html>